<template>
	<div ref="videoBox" style="width:100%;height:100%;" />
</template>

<script>
	/**
	 * 此文件用于生成保利威视频组件
	 * @property {object} options 视频配置项，当存在vid时才会开始初始化，详情参考 https://dev.polyv.net/2020/videoproduct/v-player-sdk/v-player-sdk-web/reference/
	 * @emits ready 视频组件初始化完成事件，返回视频对象实例，可以借此调用保利威api
	 */

	const userData = User.getUser() || {};
	export default {
		props: {
			options: {
				type: Object,
				default: () => {}
			},
			polyvToken: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				timeout: null,
				isLoadJs: false, // 保利威js资源是否加载完成
				player: null, // 存储生成的视频实例对象，用于调用保利威原生api
				isLoadEnd: false, // 因为切换视频时保利威初始化事件会重复触发，记录状态来避免多次向外通知初始化事件
				waitFun: () => {} // 因为保利威js加载是个异步过程，此变量存储js加载完成前的视频配置函数，当js加载完后就会执行
			};
		},
		watch: {
			options: {
				// 修改配置的时候重新加载视频(大部分情况是切换视频vid)
				handler(options = {}) {
					const { polyvToken } = this;
					const fun = () => {
						// 防抖函数，避免频繁变更配置，引起频繁重复加载
						this.timeout && clearTimeout(this.timeout);
						this.timeout = setTimeout(() => {
							if (!options.vid) {
								// 没有视频vid，没有任何意义
								return;
							}

							// 公共全局配置
							const baseOptions = {
								width: "100%",
								height: "100%",
								autoplay: true, //自动播放
								hideSwitchPlayer: true, // 隐藏flash,h5播放器切换按钮
								code: userData.userName + userData.eeNo || new Date().getTime(), // 跑马灯
								playsafe(vid = "", next) {
									if (polyvToken) {
										next(polyvToken);
									} else {
										Http.callService({
											url: "fs/polyv/token/get",
											data: {
												videoId: vid.trim(),
												type: "R"
											}
										}).success((result) => {
											next(result.token);
										});
									}
								}
							};

							if (this.player) {
								// 已经初始化完成，直接调用视频实例接口切换视频即可
								this.player.changeVid({ ...baseOptions, ...options });
							} else {
								// 第一次初始化视频，生成视频实例
								this.player = window.polyvPlayer({
									wrap: this.$refs.videoBox,
									...baseOptions,
									...options
								});
								this.player.on("s2j_onPlayerInitOver", () => {
									// 视频对象实例化完成，向外通知
									if (!this.isLoadEnd) {
										this.isLoadEnd = true; //该事件会重复出现，避免多次通知，造成后续事件重复监听
										this.$emit("ready", this.player);
									}
								});
							}
						}, 30);
					};
					if (this.isLoadJs) {
						// 保利威js资源已加载完成，执行配置函数
						fun();
					} else {
						// 保利威js资源未加载完成，缓存配置函数
						this.waitFun = fun;
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			/**
			 * 加载保利威js资源函数
			 * @return Promise 加载的结果
			 */
			loadPlayerScript() {
				return new Promise((rs) => {
					if (window.polyvPlayer) {
						// window对象已经被挂载上保利威实例，无需二次加载
						this.isLoadJs = true;
						rs();
					} else {
						// 第一次加载保利威js
						const myScript = document.createElement("script");
						myScript.setAttribute("src", "//player.polyv.net/script/player.js");
						document.body.appendChild(myScript);
						myScript.onload = () => {
							this.isLoadJs = true;
							rs();
						};
					}
				});
			}
		},
		destroyed() {
			this.player && this.player.destroy();
		},
		mounted() {
			this.$nextTick(async () => {
				// 加载保利威js资源函数，为避免js加载完，节点还没渲染完成，需要放在节点渲染完成后
				await this.loadPlayerScript();
				// js加载完成，执行之前缓存的初始化函数
				this.waitFun();
			});
		}
	};
</script>
